<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="90px">
        <el-form-item label="人员姓名" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入人员姓名" clearable style="width: 240px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px;" header="识别记录" >
      <el-table v-loading="loading" :data="records" border>
        <el-table-column label="人员姓名" align="center" prop="name" />
        <el-table-column label="图片内容" align="center" prop="imgData">
          <template #default="scope">
            <el-image
                style="width: 50px; height: 50px;"
                :src="'data:image/png;base64,' + scope.row.imgData"
                :preview-src-list="['data:image/png;base64,' + scope.row.imgData]"
                :hide-on-click-modal="true"
                :index="999"
                :initial-index="0"
                :preview-teleported="true"
                fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="识别方式" align="center" prop="type">
          <template #default="scope">
            <el-tag class="ml-2" type="success">刷脸认证</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createdAt">
          <template #default="scope">
            <span>{{timeFormatDate(scope.row.createdAt)}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup name="IotRecord">
import {recordList} from "@/api/iot/machine.js";
import {onMounted} from "vue";

const route = useRoute();
const {proxy} = getCurrentInstance();

const loading = ref(true);
const queryRef = ref(null);
const records = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  sn: '',
  name: '',
  cardId: '',
  type: '',
  createdAt: 0,
  beginCreateTime: undefined,
  endCreateTime: undefined
});

/**
 * 时间格式化为 YYYY-MM-DD hh:mm:ss
 */
const timeFormatDate = (dateString) => {
  if (!dateString) {
    return '未获取到时间';
  }
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

async function getList(sn) {
  queryParams.value.sn = sn;
  const res = await recordList(queryParams.value);
  records.value = res.data.contentData;
  loading.value = false;
  total.value = res.data.totalSize;
}
onMounted(async () => {
  console.log(route.query.sn)
  if (route.query.sn){
    await getList(route.query.sn);
  }
})

</script>

<style scoped>

</style>